 <template>
	<div>
		<Rhedar message="2"></Rhedar>
		<div class="content">
			<ul class="titles">
				<li class="Lightblue">设置用户名</li>
				<li>填写账号信息</li>
				<li>注册成功</li>
			</ul>
			<ul class="Modular">
				<li class="name Odiaplay">

					<div class="nameone">
						<p>公司邮箱：</p>
						<div>
							<input type="text" class="phone" v-model="CompanyEmall" placeholder=""  ref="CompanyEmall" @blur="CompanyEmalls()"></input>
						</div>
					</div>
					<div  class="nameone">
						<p>公司名称：</p>
						<div>
							<input type="text" class="phone" v-model="Companyname" placeholder=""  ref="Companyname"></input>
						</div>
					</div>
					<div  class="nameone">
						<p>登录密码：</p>
						<div>
							<input type="password" class="phone" v-model="SignPassword" placeholder=""  ref="SignPassword" @blur="SignPasswords()"></input>
						</div>
					</div>
					<div  class="nameone">
						<p>密码确认：</p>
						<div>
							<input type="password" class="phone" v-model="Passwordag" placeholder=""  ref="Passwordag" @blur="Passwordags()"></input>
						</div>
					</div>
					<div  class="nameone">
						<p>登录名：</p>
						<div>
							<input type="text" class="phone" v-model="Signname" placeholder=""  ref="Signname" @blur="Signnames()"></input>
						</div>
					</div>
					<div class="namebt ">
						<button @click="next1()">下一步</button>

					</div>

				</li>
				<li class="information">

					<div class="nameone">
						<p>公司地址：</p>
						<div>
							<input type="text" class="phone" v-model="address" placeholder=""  ref="address"></input>
						</div>
					</div>
					<div  class="nameone">
						<p>联系人：</p>
						<div>
							<input type="text" class="phone" v-model="Contacts" placeholder=""  ref="Contacts"></input>
						</div>
					</div>
					<div  class="nameone">
						<p>联系人电话：</p>
						<div>
							<input type="text" class="phone" v-model="Contphone" placeholder=""  ref="Contphone" @blur="Contphones()"></input>
						</div>
					</div>
					<div  class="nametwo namethr">
						<p>输入验证码：</p>
						<div>
							<input type="text" class="code" v-model="Contcode" placeholder="请输入验证码"  ref="Contcode"></input><button class="codes" @click="Verification ()">获取验证码</button>
						</div>
					</div>
					<div  class="nameone">
						<p>营业执照：</p>
						<div class="files">
							<el-upload
							  class="upload-demo"
							  action="https://jsonplaceholder.typicode.com/posts/"
							  :on-preview="handlePreview"
							  :on-remove="handleRemove"
							  :file-list="fileList">
							  <el-button size="small" type="primary">添加</el-button>

							</el-upload>
						</div>
					</div>
					<div  class="nameone">
						<p>法人身份证：</p>
						<div class="files">
							<el-upload
							  class="upload-demo"
							  action="https://jsonplaceholder.typicode.com/posts/"
							  :on-preview="handlePreview2"
							  :on-remove="handleRemove2"
							  :file-list="fileList2">
							  <el-button size="small" type="primary">添加</el-button>

							</el-upload>
						</div>
					</div>
					<div class="namebt">
						<button @click="next2()">下一步</button>
					</div>
				</li>

				<li class="register">
					<p class="Promptr Prompt1">恭喜注册成功，您的账户为：</p>
					<p class="Promptr">登录名：{{Signname}}</p>
					<p class="Promptr">绑定手机：{{Contphone}}</p>
					<p class="Promptr oranges">您已进入审核中，敬请期待，审核为3-6个工作日</p>
					<div class="namebt">
						<button>审核中</button>

					</div>
				</li>
			</ul>
		</div>
		<ul class="list">
			<li>100%正品</li>
			<li>双重质检</li>
			<li>全球化采购</li>
			<li>无理由退货</li>
			<li>贵就赔</li>
			<li>万千口碑</li>
		</ul>
		<Footers></Footers>
	</div>
</template>

<script>
import Footers from'@/components/Footers'
import Rhedar from'@/components/Rhedar'
	export default{
		data(){
			return{
				CompanyEmall: '',
				Companyname:'',
				SignPassword:'',
				Passwordag:'',
				Signname:'',
				address:'',
				Contacts:'',
				Contphone:'',
				Contcode:'',
				numberO:'true',
				passwordO:'true',
				passwordsO:'true',
				usernameO:'true',
				CompanyEmallO:'true',
				time:'60',
				fileList: [
					{
						name: 'food.jpeg',
						url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
					 },
					{
						name: 'food2.jpeg',
						url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
					}
				 ],
				fileList2: [
					{
						name: 'food.jpeg',
						url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
					 },
					{
						name: 'food2.jpeg',
						url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
					}
				 ],


			}
		},

          components:{
		      Footers,
		      Rhedar,

		    },

		methods: {
		  handleRemove:function(file, fileList) {
//	        console.log(file, fileList);
	      },
	      handlePreview:function(file) {
//	        console.log(file);
	      },
	      handleRemove2:function(file, fileList) {
//	        console.log(file, fileList);
	      },
	      handlePreview2:function(file) {
//	        console.log(file);
	      },
		  Verification:function(){

		  	if(this.time==0){
		  	  $(".codes").text("获取验证码")
		  	}else{
		  		$(".codes").text(this.time+"秒")
		  		this.time--;
		  		var that= this
		  		setTimeout(function(){
//		  			console.log("pp")
		  			that.Verification()
		  		},1000)
		  	}

		  },

		  Contphones: function() {
		        var Expression=/^1[34578]\d{9}$/;
	 			var objExp=new RegExp(Expression);
		       if(this.$refs.Contphone.value==""){
		        		this.$alert('手机号码不能为空', '', {
					          confirmButtonText: '确定',
					         });
					    this.numberO="false"
		        }else if(objExp.test(this.$refs.Contphone.value)==false){
		        			this.$alert('手机号码格式不正确', '', {
					          confirmButtonText: '确定',
					         });
		        	this.numberO="false"

		        }else{
		        	this.numberO="true"
		        }

		    },
		    CompanyEmalls:function(){
		    	var Expression=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
	 			var objExp=new RegExp(Expression);
		       if(this.$refs.CompanyEmall.value==""){
		        		this.$alert('公司邮箱不能为空', '', {
					          confirmButtonText: '确定',
					         });
					    this.CompanyEmallO="false"
		        }else if(objExp.test(this.$refs.CompanyEmall.value)==false){
		        			this.$alert('公司邮箱格式不正确', '', {
					          confirmButtonText: '确定',
					         });
		        	this.CompanyEmallO="false"

		        }else{
		        	this.CompanyEmallO="true"
		        }
		    },
		  next1:function(){

//				 console.log(this.numberO)
				 if(this.numberO=="true"){

				 	 this.$http({
		                    method:'GET',
		                    url:'http://www.wutongsd.com/awm/expertsDetails.do?id=44',
		                    data:{'websiteId':2},

		                    emulateJSON: true

			            }).then(function(data){


			            		$(".titles").find("li").eq(0).removeClass("Lightblue")
						  		$(".titles").find("li").eq(0).addClass("Deepblue")
						  		$(".titles").find("li").eq(1).addClass("Lightblue")

						  		$(".Modular").find("li").eq(0).removeClass("Odiaplay")
						  		$(".Modular").find("li").eq(1).addClass("Odiaplay")
			            },function(error){
			              	this.$alert('验证码错误', '', {
					          confirmButtonText: '确定',
					         });


			      })
				 }else{
				 	this.$alert('请填写完整信息', '', {
					          confirmButtonText: '确定',
					         });
				 }


		  },
		   SignPasswords: function() {
		         var Expression = /^[0-9a-zA-Z_]{6,18}$/ ;
	             var objExp=new RegExp(Expression);

				if(this.$refs.SignPassword.value==""){
					this.$alert('密码不能为空', '', {
					          confirmButtonText: '确定',
					         });
					    this.passwordO="false"
				}else if(objExp.test(this.$refs.SignPassword.value)==false){
		        	this.$alert('密码格式不正确', '', {
					          confirmButtonText: '确定',
					         });

		        	this.passwordO="false"
		        }else{

		        	this.passwordO="true"
		        }

		    },
		    Passwordags: function() {
		        if(this.$refs.Passwordags.value!=this.SignPassword){
		        	this.$alert('两次密码不一致', '', {
					          confirmButtonText: '确定',
					         });
		        	this.passwordsO="false"
		        }else if(this.$refs.Passwordags.value==""){
		        	this.$alert('确认密码不能为空', '', {
					          confirmButtonText: '确定',
					         });
		        	this.passwordsO="false"
		        }else{

		        	this.passwordsO="true"
		        }

		    },
		    Signnames:function(){
		    	if(this.$refs.Signname.value==""){
		        	this.$alert('登录名不能为空', '', {
					          confirmButtonText: '确定',
					         });
		        	this.usernameO="false"
		        }else{

		        	this.usernameO="true"
		        }
		    },
		  next2:function(){
				if(this.usernameO=="true"&&this.passwordsO=="true"&&this.passwordO=="true"){


					$(".titles").find("li").eq(1).removeClass("Lightblue")
			  		$(".titles").find("li").eq(1).addClass("Deepblue")
			  		$(".titles").find("li").eq(2).addClass("Deepblue")

			  		$(".Modular").find("li").eq(1).removeClass("Odiaplay")
			  		$(".register").addClass("Odiaplay")
				}else if(this.passwordO=="false"){
					this.$alert('密码有误', '', {
					          confirmButtonText: '确定',
					         });
				}else if(this.passwordsO=="false"){
					this.$alert('确认密码有误', '', {
					          confirmButtonText: '确定',
					         });
				}else if(this.usernameO=="false"){
					this.$alert('登录名不能为空', '', {
					          confirmButtonText: '确定',
					         });
				}

		  },




		}
	}
</script>

<style scoped>

.upload-demo{
	width: 270px !important;
    margin-left: 35px;
}

.titles{
	height:34px;
	width:588px;

	margin:0 auto;
	overflow: auto; zoom: 1;

}
.titles li{
	height:34px;
	width:33.3%;
	background:#dcdcdc;
	float:left;
	text-align:center;
	line-height:34px;
	color:#333;
}

.nameone{
	min-height:35px;
	width:400px;
	overflow: auto; zoom: 1;

	margin-bottom:18px;
}
.nameone p{
	height:35px;
	width:90px;
	float:left;
	line-height:35px;
	text-align:right;
}
.nameone div{
	min-height:35px;
	width:310px;
	float:left;


}


.nameone div input{
	height:33px;
	width:270px;
	border:1px solid #ccc;
	margin-left:35px;
	text-indent:10px;
}

.nametwo{
	height:35px;
	width:400px;
	overflow: auto; zoom: 1;
	margin-bottom:40px;

}
.namethr{

	margin-bottom:18px;

}
.nametwo p{
	height:35px;
	width:90px;
	float:left;
	line-height:35px;
	text-align:right;
}
.nametwo div{
	height:33px;
	width:271px;
	float:left;
	overflow: auto; zoom: 1;

	margin-left:35px;
	border:1px solid #ccc;
}
.nametwo div input{
	height:33px;
	width:195px;
	float:left;
	text-indent:10px;
}
.nametwo div button{
	height:33px;
	width:76px;
	border:0;
	float:left;
	background:#75b6ff;
	color:#fff;
}
.namebt,.namebt2{
	height:35px;
	width:80%;
	text-align:right;

}
.namebts{

	width:100%;


}

.namebt button,.namebt2 button{
	height:35px;
	width:120px;
	background:#75b6ff;
	color:#fff;
	border:0;
	border-radius:6px;

}

.namebt .home{
	background:#feba88;
	margin-right:40px;

}

.namebts .next3{
	width:100px;
	font-size:12px;
	margin-left:43px;
	color:#75b6ff;
	background:#fff;
}
.information,.register,.pay,.name{
	padding:40px 370px 40px 280px;
	width:390px;
	min-height:20px;
	border:1px solid #aaa;
	margin:45px auto;
	display:none;
}

.information .Prompt{
	height:35px;
	margin-left:115px;
	font-size:12px;
	color:#7a7a7a;

}
.register .Promptr{
	height:30px;
	margin-left:125px;
	text-align:center;
	font-size:12px;
	color:#333;

}
.register .Prompt1{
	background:url(../assets/right.png) no-repeat;
	font-size:14px;
	color:#333;

}
.register .oranges{
	color:#ffc45e;
}
.information .nameones{
	margin-bottom:40px;
}
.content{
	min-height:60px;
	text-align: left;
	width:100%;




}

.list{
	height:182px;
	margin:0 auto;
	width:1060px;
	overflow: auto; zoom: 1;

}
.list li{
	float:left;
	height:182px;
	width:163px;
	background:red;
	text-align:right;
	line-height:270px;

}
.list li:nth-child(1){
	background:url(../assets/three.png) no-repeat 101px 42px;
}
.list li:nth-child(2){
	background:url(../assets/four.png) no-repeat 101px 42px;

}
.list li:nth-child(3){
	background:url(../assets/five.png) no-repeat 101px 42px;

}
.list li:nth-child(4){
	background:url(../assets/six.png) no-repeat 101px 42px;

}
.list li:nth-child(5){
	background:url(../assets/two.png) no-repeat 101px 42px;

}
.list li:nth-child(6){
	background:url(../assets/one.png) no-repeat 101px 42px;

}
.Odiaplay{
	display:block;
}
.titles .Deepblue{
	background:#459dff;
	color:#fff;
}
.titles .Lightblue{
	background:#9dc9fb;
	color:#fff;
}
</style>
